<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2708812_cu20yqiec7.css">
    <link rel="icon" href="./favicon.ico">
</head>

<body>
    <!-- 快捷导航模块 start -->
    <section class="shortcut">
        <div class="w">
            <div class="sl l">
                <a href="#">小米商城</a><span class="sep">|</span>
                <a href="#">MIUI</a><span class="sep">|</span>
                <a href="#">米聊</a><span class="sep">|</span>
                <a href="#">游戏</a><span class="sep">|</span>
                <a href="#">多看阅读</a><span class="sep">|</span>
                <a href="#">云服务</a><span class="sep">|</span>
                <a href="#">金融</a><span class="sep">|</span>
                <a href="#">小米商城移动版</a><span class="sep">|</span>
                <a href="#">问题反馈</a><span class="sep">|</span>
                <a href="#">SelectRegion</a>
            </div>
            <div class="sr r">
                <div class="shopcar r">
                    购物车<span>(0)</span>
                </div>
                <div class="regsiter r">
                    <a href="#">登录</a><span class="sep">|</span>
                    <a href="#">注册</a><span class="sep">|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 快捷导航模块 end -->

    <!-- header头部模块制作 start -->
    <header class="head">
        <div class="w">
            <div class="logo l">
                <a href="mi.com" title="小米商城" class="nav_logo"></a>
            </div>
            <div class="nav l">
                <ul>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="submenu">这里是二级</div>
                    </li>
                    <li>
                        <a href="#">红米</a>
                        <div class="submenu">55555555</div>
                    </li>
                    <li>
                        <a href="#">平板·笔记本</a>
                        <div class="submenu">222222</div>
                    </li>
                    <li>
                        <a href="#">电视</a>
                        <div class="submenu">这里是二级</div>
                    </li>
                    <li>
                        <a href="#">盒子·影音</a>
                        <div class="submenu">这里是二级</div>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                        <div class="submenu">这里是二级</div>
                    </li>
                    <li>
                        <a href="#">智能硬件</a>
                        <div class="submenu">这里是二级</div>
                    </li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="serch l">
                <div class="serch_bar cl">
                    <input type="text" class="serch_con">
                    <a href="" class="serch_btn"></a>
                    <!-- <ul class="serch_list">
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                    </ul> -->
                </div>
            </div>

            <div class="menu_ce">
                <ul>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">123</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">1555555555555555555555555</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">14444444444444444444444443</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">88888888888888888</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">8888888888888</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">8888888888888</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">77777777777777777</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">8888888888888888888888</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">888</div>
                    </li>
                    <li>
                        <a href="#">手机卡电话卡<i class="iconfont icon-iconfontangleright"></i></a>
                        <div class="submenu_ce">5555</div>
                    </li>
                </ul>
            </div>
        </div>

    </header>
    <!-- header头部模块制作 end -->

    <!-- banner -->
    <div class="banner_warp">
        <div class="banner w">
            <img src="./images/pc_7.jpg" alt="">
        </div>
    </div>
    <!-- 明星单品 -->
    <div class="start_cp">
        <div class="hero_warp">
            <div class="hero w">
                <div class="hero_home l">
                    <a href="#"><span></span><b>小米秒杀</b></a>
                    <a href="#"><span></span><b>企业团购</b></a>
                    <a href="#"><span></span><b>F码通行</b></a>
                    <a href="#"><span></span><b>米粉卡</b></a>
                    <a href="#"><span></span><b>以旧换新</b></a>
                    <a href="#"><span></span><b>话费充值</b></a>
                </div>
                <div class="dn l">
                    <a href="#"><img src="./images/pc_2.jpg" alt="" class="img_size"></a>
                </div>
                <div class="sj l">
                    <a href="#"><img src="./images/pc_6.jpg" alt="" class="img_size2"></a>
                </div>

                <div class="ds l">
                    <a href="#"><img src="./images/pc_1.png" alt="" class="img_size3"></a>
                </div>
            </div>
        </div>

        <!-- 明星单品 -->

        <div class="star w">
            <div class="star_tit">
                <span class="mxdp l">小米明星单品</span>
                <a href="#"><span></span></a>
                <a href="#"><span></span></a>
            </div>
            <div class="star_item">
                <div class="item">
                    <div class="item_img">
                        <img src="./images/xiaomi5.png" alt="">
                    </div>
                    <h3>小米K30 Plus</h3>
                    <p>6.0英寸大屏双摄手机，拍照黑科技</p>
                    <span>2299元起</span>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="./images/xiaomi5.png" alt="">
                    </div>
                    <h3>小米K30 Plus</h3>
                    <p>6.0英寸大屏双摄手机，拍照黑科技</p>
                    <span>2299元起</span>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="./images/xiaomi5.png" alt="">
                    </div>
                    <h3>小米K30 Plus</h3>
                    <p>6.0英寸大屏双摄手机，拍照黑科技</p>
                    <span>2299元起</span>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="./images/xiaomi5.png" alt="">
                    </div>
                    <h3>小米K30 Plus</h3>
                    <p>6.0英寸大屏双摄手机，拍照黑科技</p>
                    <span>2299元起</span>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="./images/xiaomi5.png" alt="">
                    </div>
                    <h3>小米K30 Plus</h3>
                    <p>6.0英寸大屏双摄手机，拍照黑科技</p>
                    <span>2299元起</span>
                </div>
            </div>
        </div>

    </div>
    <div class="containerr">
        <!-- 智能硬件 -->
        <div class="hardwarr w">
            <div class="hardwarr_tit">
                <span>智能硬件</span>
                <span class="r"><a href="#">查看全部<i></i></a></span>
            </div>
            <div class="hardwarr_cp">
                <div class="hardwarr_hb l">
                    <img src="./images/pc_4.webp" alt="">
                </div>
                <div class="hardwarr_list l">
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                    <li>
                        <div class="har_img">
                            <img src="./images/pc_11.webp" alt="">
                        </div>
                        <p>米家电饭煲</p>
                        <p>电磁环绕加热,300+煮米方案</p>
                        <span>399元</span>
                    </li>
                </div>
            </div>
        </div>
        <!-- 搭配 -->
        <div class="collocation w">
            <div class="coll_tit">
                <span>搭配</span>
                <div class="coll_nav r">
                    <a href="#">热门</a>
                    <a href="#">耳机音箱</a>
                    <a href="#">电源</a>
                    <a href="#">电池储存卡</a>
                </div>
            </div>
            <div class="coll_list">
                <li class="li_img">
                    <img src="./images/pc_2.webp" alt="">
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li class="li_img">
                    <img src="./images/pc_10.webp" alt="">
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/cdb.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
            </div>
        </div>

        <!-- 配件 -->
        <div class="access w">
            <div class="acc_tit">
                <span>配件</span>
                <div class="acc_nav r">
                    <a href="#">热门</a>
                    <a href="#">保护套</a>
                    <a href="#">贴膜</a>
                    <a href="#">其他配件</a>
                </div>
            </div>
            <div class="acc_list">
                <li class="li_img">
                    <img src="./images/pj-1.webp" alt="">
                </li>
                <li>
                    <div class="acc_lsit_img">
                        <img src="./images/pc_4.jpg" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="acc_lsit_img">
                        <img src="./images/pc_4.jpg" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="acc_lsit_img">
                        <img src="./images/pc_4.jpg" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="acc_lsit_img">
                        <img src="./images/pc_4.jpg" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li class="li_img">
                    <img src="./images/pj-2.webp" alt="">
                </li>
                <li>
                    <div class="acc_lsit_img">
                        <img src="./images/pc_4.jpg" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="acc_lsit_img">
                        <img src="./images/pc_4.jpg" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="acc_lsit_img">
                        <img src="./images/pc_4.jpg" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li class="genduo">
                    <div class="acc_xiao">
                        <div class="l">
                            <p class="redmi">红米4x标准...</p>
                            <p class="price">19元</p>
                        </div>
                        <div class="l">
                            <img src="./images/aa.webp" alt="">
                        </div>
                    </div>
                    <div class="acc_more">
                        <div class="remen l">
                            <p>浏览更多</p>
                            <span>热门</span>
                        </div>
                        <div class="jtou r">
                            
                        </div>
                    </div>
                </li>
            </div>
        </div>

        <!-- 周边 -->
        <div class="rim w">
            <div class="rim_tit">
                <span>周边</span>
                <div class="rim_nav r">
                    <a href="#">热门</a>
                    <a href="#">服装</a>
                    <a href="#">米兔</a>
                    <a href="#">生活周边</a>
                    <a href="#">箱包</a>
                </div>
            </div>
            <div class="rim_list">
                <li class="li_img">
                    <img src="./images/zb-1.webp" alt="">
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li class="li_img">
                    <img src="./images/zb-2.webp" alt="">
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
                <li>
                    <div class="coll_lsit_img">
                        <img src="./images/zb-3.webp" alt="">
                    </div>
                    <p>2000mAh小米移动电源2</p>
                    <span>399元</span>
                    <p>8634人评价</p>
                </li>
            </div>
        </div>
    </div>

    <footer class="footer w">
        <div class="sales">
            <a href="#"><i></i>预约维修服务</a>
            <a href="#"><i></i>7天无理由退货</a>
            <a href="#"><i></i>15天免费换货</a>
            <a href="#"><i></i>满150元包邮</a>
            <a href="#"><i></i>520家售后网点</a>
        </div>
        <div class="dibu">
            <div class="d_nav l">
                <ul>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                </ul>
            </div>
            <div class="tel l">
                <p>400-100-5678</p>
                <p>周一至周五8:00-16:00</p>
                <p>(仅收市话费)</p>
                <span><i></i>小时在线客服</span>
            </div>
        </div>
    </footer>
    <div class="copyright">
        <div class="copy w">
            <div class="copy_logo l clearfix">
                <img src="./images/logo-mi2.png" alt="">
            </div>
            <div class="copy_nav l clearfix">
                <a href="#">小米商城</a><span class="seb">|</span>
                <a href="#">MIUI</a><span class="seb">|</span>
                <a href="#">米家</a><span class="seb">|</span>
                <a href="#">米聊</a><span class="seb">|</span>
                <a href="#">多看</a><span class="seb">|</span>
                <a href="#">游戏</a><span class="seb">|</span>
                <a href="#">政企服务</a><span class="seb">|</span>
                <a href="#">小米天猫店</a><span class="seb">|</span>
                <a href="#">小米集团隐私政策</a><span class="seb">|</span>
                <a href="#">小米公司儿童信息保护规则</a><span class="seb">|</span>
                <a href="#">小米商城用户协议</a><span class="seb">|</span>
                <a href="#">问题反馈</a>
                <span class="seb"> |</span>
                <a href="#">Select Location</a>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                    增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
                    违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>

            </div>
        </div>
        <p class="copy_p">探索黑科技,小米为发烧而生!</p>

    </div>
</body>

</html>